import { memo, useEffect, useState } from "react";
import { TabBar } from "antd-mobile";
import { tabbarConfig } from "./config";
import TabbarStyle from "./style";
import { useLocation, useNavigate } from "react-router-dom";
import { routeItmeType } from "../../router";

const Tabbar = memo(() => {
  const [activeKey, setActiveKey] = useState<routeItmeType>(routeItmeType.HOME);
  const nav = useNavigate();
  const pathname = useLocation().pathname;
  useEffect(() => {
    setActiveKey(pathname as routeItmeType);
  }, []);
  const changehandel = (value: routeItmeType) => {
    nav(value);
    setActiveKey(value);
  };
  return (
    <TabbarStyle className="ignore-tabbar">
      <TabBar
        safeArea
        activeKey={activeKey}
        onChange={(value: string) => changehandel(value as routeItmeType)}
      >
        {tabbarConfig.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </TabbarStyle>
  );
});

export default Tabbar;
